{include file="common/header"/}
<style>
.layui-card{border: 1px solid #CCC;}
.p10{padding:10px 0;}
.mediasList .mediasImg{width:100%;position:relative;}
.mediasList .mediasImg [data-select="mediasImg"]{ width: 100%; height:100%; }
.mediasList .mediasImg .mediasTitle{position:absolute;left:0;right:0;bottom:0;height:25px; line-height:25px; padding:0px 10px; background:#000;color:#FFF;}
.article-add{ display:block; text-align:center;height:30px; line-height:30px; cursor:pointer; }
.mediasList .medias-item{ display:flex;  padding: 0px 10px;}
.mediasList .medias-item .medias-item-title{ flex:1}
.mediasList .medias-item .medias-item-img{ width: 60px; height:60px; }
.mediasList .medias-item .medias-item-img img{ width:100%;}
.curt{ background: #009688 }
</style>
<div class="layui-fluid">
  <div class="layui-row layui-col-space15">
    <div class="layui-col-md12">
      <div class="layui-card">
        <div class="layui-card-body">
          <div class="layui-row layui-col-space15">
          {volist name="lists" id="vo" key="key"}
            <div class="layui-col-md2 layui-col-sm4 newslist " data-id="{$vo.id}">
              <div class="layui-card">
                {volist name="vo.child" id="vo1" key="k"}
                  {if $Think.lang.$k == 1}
                  <div class="layui-card-body news-left">
                    <div class="mediasList active">
                      <div class="mediasImg">
                        <img data-select="mediasImg" src="{$vo1.image}" alt="">
                        <span class="mediasTitle" data-select="mediasTitle" data-title="{$vo1.title}" >{$vo1.title}</span>
                      </div>
                    </div>
                  </div>
                  {else}
                  <div class="mediasList p10">
                    <div class="medias-item">
                      <div class="medias-item-title"><div data-select="mediasTitle">{$vo1.title}</div></div>
                      <div class="medias-item-img"><img data-select="mediasImg" src="{$vo1.image}" alt=""></div></div>
                  </div>
                  {/if}
                  {/volist}
              </div>
            </div>
          {/volist}
          </div>
          {notempty name="paginator"}
          <div class="layui-row">
            <div class="layui-box layui-laypage layui-laypage-default" id="layui-laypage-10">{$paginator|raw}</div>
          </div>
          {/notempty}
        </div>
      </div>
    </div>
  </div>
</div>

{include file="common/footer"/}
<script>
$(function(){
  $('.newslist').click(function(){
    $(this).addClass('curt').siblings().removeClass('curt');
    var news_id = $(this).attr('data-id')
    var title = $(this).find('.mediasTitle').attr('data-title')
    
    parent.$('input[name=news_id]').val(news_id);
    parent.$('#selectNews').text(title);
    parent.layer.closeAll();
  })
})
</script>